<template>
  <div class="homeindex">
    <div class="header">
      <img src="../../assets/前台/首页/扫码.png" alt="">
      <div class="sou">
        <img src="../../assets/前台/首页/搜索.png" alt="">
        <input type="text" placeholder="复制淘宝商品名称，搜优惠返利">
      </div>
      <img src="../../assets/前台/首页/消息.png" alt="">
    </div>
    <div class="boby">
      <ul>
        <li>推荐</li>
        <li>家电</li>
        <li>食品</li>
        <li>数码</li>
        <li>美妆</li>
        <li>配饰</li>
        <li>
          <img src="../../assets/前台/首页/更多.png" alt="">
        </li>
      </ul>
      <div class="boby-one">
        <img src="../../assets/前台/首页/Banner.png" alt="">
      </div>
      <div class="boby-two">
        <ul>
          <li>
            <img src="../../assets/前台/首页/签到领券.png" alt="">
            <p>签到领券</p>
          </li>
          <li>
            <img src="../../assets/前台/首页/优淘超市.png" alt="">
            <p>优淘超市</p>
          </li>
          <li>
            <img src="../../assets/前台/首页/TOP榜单.png" alt="">
            <p>TOP榜单</p>
          </li>
          <li>
            <img src="../../assets/前台/首页/门店到家.png" alt="">
            <p>门店到家</p>
          </li>
          <li>
            <img src="../../assets/前台/首页/积分商城.png" alt="">
            <p>积分商城</p>
          </li>
        </ul>
      </div>
    </div>
    <div class="footer">
      <div class="footer-one">
        <img src="../../assets/前台/首页/标题.png" alt="">
        <p>距海淘宝库关闭还有10小时，抓紧剁手啊！</p>
      </div>
      <div class="footer-two">
        <ul>
          <li>
            <aside>
              <p>品牌闪购</p>
              <button style="background-color:#e64d4d">美的</button>
            </aside>
            <i>买微波炉送大米</i>
            <img src="../../assets/前台/首页/微波炉.png" alt="">
            <img src="../../assets/前台/首页/大米.png" alt="">
          </li>
          <li>
            <aside>
              <p>畅玩3C</p>
              <button style="background-color:#f130b7">城市直播节</button>
            </aside>
            <i>分享送优惠券</i>
            <img src="../../assets/前台/首页/电脑.png" alt="">
            <img src="../../assets/前台/首页/大米.png" alt="">
          </li>
          <li>
            <aside>
              <p>热卖榜单</p>
              <button style="background-color:#30f582">养生</button>
            </aside>
            <i>热门养生紫砂茶具</i>
            <img src="../../assets/前台/首页/茶具.png" alt="">
            <img src="../../assets/前台/首页/插花壶.png" alt="">
          </li>
          <li>
            <aside>
              <p>精选大牌</p>
              <button style="background-color:#1417e6">家电专场</button>
            </aside>
            <i>实惠好货折上折</i>
            <img src="../../assets/前台/首页/吹风机.png" alt="">
            <img src="../../assets/前台/首页/吸尘器.png" alt="">
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
.homeindex{
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/前台/首页/背景.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  /* background-attachment: fixed; */
}
.homeindex .header{
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
}
.homeindex .header .sou{
  width: 20rem;
  height: 2.8rem;
  background-color: #fff;
  border:none;
  border-radius: 50px;
  display: flex;
  align-items: center;
}
.homeindex .header .sou img{
  margin-left: 10px;
}
.homeindex .header img{
  width: 20px;
  height: 20px;
}
.homeindex .header .sou input{
  width: 15rem;
  height: 2.1rem;
  border: none;
  outline: none;
}
.homeindex .boby ul{
  display: flex;
  color: white;
  margin: 15px;
  justify-content: space-between;
}
.homeindex .boby ul li img{
  width: 15px;
  height: 10px;
}
.homeindex .boby .boby-one{
  display: flex;
  justify-content: center;
  align-items: center;
}
.homeindex .boby .boby-one img{
  width: 25rem;
  height: 13rem;
}
.homeindex .boby .boby-two{
  background-color: #fff;
  border: none;
  border-radius: 6px;
  margin-top: 2rem;
}
.homeindex .boby .boby-two img{
  width: 3.7rem;
  height: 3.7rem;
}
.homeindex .footer{
  width: 100%;
}
.homeindex .footer .footer-one{
  display: flex;
  align-items: center;
  margin: 10px;
}
.homeindex .footer .footer-one img{
  width: 5rem;
  height: 2rem;
}
.homeindex .footer .footer-one p{
  color: gray;
  font-size: 15px;
  margin-left: 5px;
}
.homeindex .footer .footer-two ul li{
  width: 10rem;
  height: 10rem;
  background-color: #fff;
  border-radius: 6px;
}
.homeindex .footer .footer-two ul{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
}
.homeindex .footer .footer-two ul li{
  width: 200px;
  height: 200px;
  border: 1px solid gray;
  /* margin: 10px; */
  border-radius: 6px;
  box-shadow: 0.5px 1px 2px 0.5px;
  padding: 5px;
}
.homeindex .footer .footer-two ul li aside{
  display: flex;
  justify-content: space-between;
}
.homeindex .footer .footer-two ul li aside p{
  font-size: 20px;
  font-weight: 800;
}
.homeindex .footer .footer-two ul li aside button{
  border: none;
  border-radius: 6px;
  width: 80px;
  color: white;

}
.homeindex .footer .footer-two ul li i{
  display: block;
  color: #cf9494;
}
.homeindex .footer .footer-two ul li img{
  width: 4rem;
  margin: 10px;
}
</style>